<template>
  <div>
    <div style="display: flex; color: #666">
        <div
        style="width: 200px; border-right: 1px solid #ddd; text-align: center;padding-top: 10px; min-height: calc(100vh - 86px)">

        <!-- 第一部分 -->
        <div>
          <div @click="loadFiles(item.category)" class="category" style="padding: 20px 0;margin-bottom: 10px;" v-for="item in categoryList" :key="item.text"
            :class="{ 'category-active': category === item.category }">
            <i v-if="item.icon" :class="item.icon" style="margin-right: 12px"></i>
            <span>{{ item.text }}</span>
          </div>
        </div>
        <!-- 第二部分 -->
        <div style="border-top:1px solid #ddd; margin-top: 30px;text-align: center;">

          <div @click="loadFiles('share')" style="padding: 20px 0;margin-top: 30px;" class="category"
            :class="{ 'category-active': category === 'share' }">
            <i class="el-icon-share" style="margin-left: 30px"></i>
            <span style="margin-left: 12px">我的分享</span>
          </div>
          <div  @click="loadFiles('trash')" style="padding: 20px 0;margin-top: 10px; " class="category"
            :class="{ 'category-active': category === 'trash' }">
            <i class="el-icon-delete" style="margin-left: 21px"></i>
            <span style="margin-left: 12px">回收站</span>
          </div>
        </div>
      </div>

      <div style="flex: 1">

        <Trash :type-list="typeList"  v-if="category === 'trash'" />
        <Share :type-list="typeList" v-if="category === 'share'" />
        <Main :type-list="typeList" v-else />
      </div>
    </div>
  </div>
</template>

<script>

import Main from "@/components/Main";
import Trash from "@/components/Trash";
import Share from "@/components/Share";


export default {
  components: {
    Trash,
    Main,
    Share
  },
  data() {
    return {
        categoryList: [
        { "text": '全部文件', category: 'all', icon: '' },
        { "text": '图片', category: 'img', icon: 'el-icon-picture-outline' },
        { "text": '视频', category: 'video', icon: 'el-icon-video-camera-solid' },
        { "text": '压缩', category: 'zip', icon: 'el-icon-box' },
      ],
      typeList: [
        { text: 'mp3', icon: 'el-icon-mp3' },
        { text: 'mp4', icon: 'el-icon-video-camera-solid' },
        { text: 'jpg', icon: 'el-icon-picture' },
        { text: 'jpeg', icon: 'el-icon-picture' },
        { text: 'png', icon: 'el-icon-picture' },
        { text: 'pdf', icon: 'el-icon-pdf' },
        { text: 'docx', icon: 'el-icon-docx' },
        { text: 'txt', icon: 'el-icon-text' },
        { text: 'zip', icon: 'el-icon-collection' },
        { text: 'folder', icon: 'el-icon-folder' },
      ],
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      category: this.$route.query.category,  // 分类
    
    }
  },
  mounted() {

  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    loadFiles(category) {
        location.href = '/front/home?category=' + category
      }
  }
}
</script>

<style scoped>
.category {
  cursor: pointer;
}
.category:hover {
  background-color: #f8f8f8;
  color: #000;
}
.category-active {
  color: #409EFF;
}
</style>